<template>
<div class="app-detail">
      <div class="topnav" v-if="(shoptype == 'store' && storedetail) || /storedetail/.test($route.path)">
          <div class="wrapper">
              <ul>
              <li  :class="{'current': !/storedetail/.test($route.path)}">
                <router-link  :to="{ path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode}" replace>
                    商品
                </router-link>
              </li>
              <li  :class="{'current':/storedetail/.test($route.path)}">
                <router-link  :to="{ path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/storedetail'}" replace>
                    详情
                </router-link>
              </li>
              </ul>
          </div>
      </div>
      <div class="topnav" v-if="shoptype != 'store' &&  !/storedetail/.test($route.path)">

          <div class="wrapper">
              <ul>
              <li  :class="{'current':!/vdetails/.test($route.path) && !/vcomment/.test($route.path) }">
                <router-link  :to="{ path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode}" replace>
                    商品
                </router-link>
              </li>
              <li  :class="{'current':/vdetails/.test($route.path)}">
                <router-link  :to="{ path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/vdetails/imgdetail'}" replace>
                    详情
                </router-link>
              </li>
              <li  :class="{'current':/vcomment/.test($route.path)}">
                <router-link  :to="{ path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/vcomment/total'}" replace>
                    评价
                </router-link>
              </li>
              </ul>
          </div>
      </div>
      <div :class="{'detail': shoptype != 'store' || storedetail}">
        <router-view v-on:imgTextFlag = 'acceptText'></router-view>
      </div>
      <div class="protool">
        <div class="wrapper">
            <ul class="btns">
                <li>
                    <a class="online" @click="callfn">
                        <i></i>
                        <p>联系苏鲜生</p>
                    </a>
                </li>
                <li v-if="shoptype != 'center'">
                    <a href="#/cart1/" class="gocart">
                        <i><b>{{cartsNumber}}</b></i>
                        <p>购物车</p>
                    </a>
                </li>
                <li v-if="shoptype == 'center'">
                    <a href="#/cart1/center" class="gocart">
                        <i><b>{{cartsNumber}}</b></i>
                        <p>购物车</p>
                    </a>
                </li>
            </ul>
            <div class="addcart"> 
                <!-- 云钻兑换相关按钮 -->
                <a v-if="!on && yztype != 'yzactive'" class="btn-addcart soldout" href="javascript:void(0);" :class="{'active': !on}"><span v-if="!yr">来晚了，商品已售空</span> <span v-if="yr">活动即将开始</span> </a>

                <a v-if="on && yztype != 'yzactive'" class="btn-addcart" href="javascript:void(0);" @click="fn1" :class="{'active': !on}">放入购物车</a>
                <a v-if=" yztype == 'yzactive'" class="btn-addcart" href="javascript:void(0);"   :class="{'active': !on}">立即兑换</a>
            </div>
        </div>
  </div>

<!--   <div class="go-left" @click="$router.go(-1)"></div>
  <div class="go-sharp"></div> -->

</div>  
   
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import shop from './components/shop'
import vDetails from './components/vDetails'
import vComment from './components/vComment'
import {  getCart, gettelcall } from '@/service/getData'
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
    data(){
      return {
        countThis:0,
        tabid:this.$route.params.tabid,
        shopName:'',
        storedetail: false
      }
    },
    created(){

      if(!this.telcall) {
        gettelcall({
            'deviceType':'1',
            'osVersion': '10.3',
            'appVersion': '3.2.2'
          })
          .then((rep) => {
              if(!rep.data) return;
              var sl = rep.data.switchList
              if(sl &&　sl.length > 0) {
                for(var i = 0; i < sl.length; i++) {
                  if(sl[i].switchName == 'Contact_PhoneNo') {
                    this.$store.dispatch('telcall', sl[i].directUrl )
                    break;
                  }
                }
              }
          })
        }
        this.$store.dispatch("getSufreshProducts", {
          'cmmdtyCode': this.$route.params.cmmdtyCode
        })
        this.$store.dispatch("getCenterProducts", {
          'cmmdtyCode': this.$route.params.cmmdtyCode
        })
       
    },
    computed: {
      ...mapGetters({
        on: 'geton',
        cartsNumber:'cartsNumber',
        shoptype: 'gettype',
        yztype:'getyztype',
        position: 'position',
        yr: 'yr',
        telcall: 'telcall'
      })
    },
    
    methods:{
      acceptText(data){
        if(data == '1') {
          this.storedetail = true
        }
      },
      fn1(){
        if(this.shoptype == 'store'){
            this.$store.dispatch('addSufreshCart', {

                cmmdtyCode: this.$route.params.cmmdtyCode,
                shopName:this.shopName,
                shopCode: this.$route.params.supplierCode

            });
        }
        if(this.shoptype == 'center'){
              this.$store.dispatch('addCenterCart', {

                  cmmdtyCode: this.$route.params.cmmdtyCode,
                  shopName:this.shopName,
                  shopCode: this.$route.params.supplierCode

              });
          }
        
      },
      callfn(){
         var that = this
         AlertBox({
             type:'doubleBtn',
             msg: that.telcall,
             confirmText:"呼叫",
             cancelText :'取消',
             alertType:'fixed',
             confirm:function(){
                location.href="tel:15151878888" 
             }
         })
      }
    },
    components: {
      swiper,
      swiperSlide,
      shop,
      vDetails,
      vComment
    }
    
}
</script>

<style lang="scss" scoped>
 .apptip-visible{
      .go-left, .go-sharp {
        top: 2.1rem;
      }
  }
@function _($px) {
      $rem: $px/50;
      @return #{$rem}rem;
 }
  .go-left, .go-sharp{
    position: fixed;
    top:_(10);
    width: _(60);
    height: _(60);
    background-color: #fff;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center; 
    z-index: 70;
  }
 
  .go-left {
    left: _(10);
    background-size: _(17) _(29);
    background-image: url('/static/images/store/left.png');
  }
  .go-sharp {
    right: _(10);
    background-size: _(35) _(39);
    background-image: url('/static/images/store/sharp.png');
  }
  .detail .swiper-pagination {
    position: fixed;
    top: 0;
    height: 1.6rem;
    border-bottom: solid 1px #DDD;
  }
  .detail {
    padding-top: 1.6rem;
    // padding-bottom: 1.96rem;
    overflow: hidden;
    min-height: 23rem;
  }
 
.detail .swiper-pagination-bullet-active {
  
    border-bottom: solid .08rem #FF782D;
 
}
.detail .current .swiper-pagination-bullet-active {
  
    border-bottom: 0;
 
}
.topnav{
    text-align: center;
    background-color: #fff;
    z-index:70;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.6rem;
}
.topnav .wrapper {
    height: 100%;
    border-bottom: solid 1px #DDD;
    background: #FFF;
}
.topnav li.swiper-pagination-bullet {
    background-color: transparent !important;
    width: auto !important;
    display: inline-block;
    margin: 0 .7rem;
    height: 1.6rem;
    line-height: 1.6rem;
    border-radius: 1px !important;
    font-size: .68rem;
    opacity: 1;
}
.protool {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 80;
}
.topnav ul li {
    display: inline-block;
    margin: 0 .7rem;
    font-size: .68rem;
    line-height: 1.6rem;
    position: relative;
}
.topnav ul li a {
    display: inline-block;
    width: 100%;
    height: 1.6rem;
    font-size: .68rem;
    line-height: 1.6rem;
    color: #353d44;
}
.topnav ul li.current:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: solid .08rem #FF782D;
} 
.protool .wrapper {
    position: relative;
    height: 1.96rem;
    background: #FFF;
    border-top: solid 1px #E5E5E5;
}
.protool .wrapper .btns {
    float: left;
    width: 5.8rem;
    height: 100%;
}
.protool .wrapper .btns li {
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;
    margin: 0 !important;
}
.protool .wrapper .btns li a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: .32rem;
    font-size: .4rem;

}
.protool .wrapper .btns li a.online {
    border-right: solid 1px #E5E5E5;
}
.protool .wrapper .btns li a i {
    display: block;
    width: .72rem;
    height: .72rem;
    margin: 0 auto;
    background-size: 100% 100%;
}
.protool .wrapper .btns li a.online i {
    background-image: url('/static/images/store/call@2x.png');
}

.protool .wrapper .btns li a.gocart i {
    position: relative;
    background-image: url('/static/images/store/spc@2x.png');
}

.protool .wrapper .btns li a.gocart i b {
    position: absolute;
    top: -.16rem;
    left: .48rem;
    min-width: .56rem;
    height: .56rem;
    padding: 0 .1rem;
    border-radius: .56rem;
    background: #FF782D;
    line-height: .56rem;
    text-align: center;
    color: #FFF;
}
.protool .wrapper .btns li a p {
    margin-top: .12rem;
    line-height: .56rem;
    color: #666;
}
.protool .wrapper .addcart {
    position: absolute;
    top: -1px;
    right: 0;
    height: 1.96rem;
    overflow: hidden;
}
.protool .wrapper .addcart .btn-addcart {
    float: right;
    width: 9.2rem;
    height: 100%;
    background: #FF782D;
    line-height: 1.96rem;
    text-align: center;
    font-size: .6rem;
    color: #FFF;
}
.protool .wrapper .addcart .btn-addcart.active {
  background-color: #ccc;
}
.thum-style .list-datail .o-pro-info {
    margin: .2rem .32rem;
    font-size: .52rem;
    text-align: center;
    color: #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.protool .wrapper .addcart .soldout {
    float: right;
    width: 9.2rem;
    height: 100%;
    line-height: 1.96rem;
    font-size: .6rem;
    text-align: center;
    color: #BBB;
    background-color: #E5E5E5 !important;
}
  
</style>
